/**
 * Created by YJH on 2018/6/7.
 */

import React, {Component, PropTypes} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    DeviceEventEmitter
} from 'react-native';
import Popover from '../module/Popover';
import SortKeyPage from '../page/mine/SortKeyPage';
import TabCustomPage from '../page/mine/TabCustomPage';
import AboutMePage from '../page/mine/AboutMePage';
import AboutPage from '../page/mine/AboutPage';
import LanguageDao,{FLAG_LAN} from '../expand/dao/LanguageDao';
import WebBlogPage from '../../js/page/mine/WebBlogPage';



export const MORE_MENU = {
    custom_language: '自定义语言',
    sort_language: '语言排序',
    custom_theme: '自定义主题',
    custom_key: '自定义标签',
    sort_key: '标签排序',
    remove_key: '移除标签',
    about_author: '关于作者',
    about: '关于',
    website: '博客地址',
    feedback: '反馈',
    share: '分享',
};


export default class MoreMenu extends Component {

    static propTypes={
        contentStyle:View.propTypes.style,
        menus:PropTypes.array.isRequired,
        anchorView:PropTypes.func,
    };
    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
            buttonRect: {},
        };
    }

    open(){
        this.showPopover();
    }

    close(){
        this.closePopover();
    }

    onMenuSeleted(item) {
        this.setState({
            isVisible:false,
        });

        let TabComponent, params = {...this.props, menuType: item};
        switch (item) {
            case MORE_MENU.custom_language:
                TabComponent = TabCustomPage;
                params.flag = FLAG_LAN.flagLanguage;
                params.isPopular = false;
                break;

            case MORE_MENU.sort_language:
                TabComponent = SortKeyPage;
                params.flag = FLAG_LAN.flagLanguage;
                params.isPopular = false;
                break;

            case MORE_MENU.custom_key:
                TabComponent = TabCustomPage;
                params.flag = FLAG_LAN.flagKey;
                params.isPopular = true;
                break;

            case MORE_MENU.remove_key:
                TabComponent = TabCustomPage;
                params.flag = FLAG_LAN.flagKey;
                params.isPopular = true;
                break;

            case MORE_MENU.sort_key:
                TabComponent = SortKeyPage;
                params.flag = FLAG_LAN.flagKey;
                params.isPopular = true;
                break;

            case MORE_MENU.custom_theme:
                break;

            case MORE_MENU.about:
                TabComponent = AboutPage;
                break;

            case MORE_MENU.about_author:
                TabComponent = AboutMePage;
                break;
            case MORE_MENU.share:
                break;
            case MORE_MENU.website:
                TabComponent = WebBlogPage;
                break;
        }


        if (TabComponent) {
            this.props.navigator.push({
                component: TabComponent,
                params: params,
            })
        }

    }

    showPopover() {
        if(!this.props.anchorView)return;
        let anchorView = this.props.anchorView();

        anchorView.measure((ox, oy, width, height, px, py) => {
            this.setState({
                isVisible: true,
                buttonRect: {x: px, y: py, width: width, height: height}
            });
        });
    }

    closePopover() {
        this.setState({isVisible: false});
    }

    // componentWillReceiveProps(nextProps){
    //     DeviceEventEmitter.emit('showToast', nextProps.menus[0]);
    // }

    renderPopover() {
        let popView = <Popover
            isVisible={this.state.isVisible}
            fromRect={this.state.buttonRect}
            onClose={() => this.close()}
            placement='bottom'
            contentStyle={{backgroundColor: '#343434', opacity: 0.8}}
        >
            <View style={{alignItems: 'center'}}>
                {this.props.menus.map((result, i, arr) => {
                    return <TouchableOpacity key={i} onPress={() => this.onMenuSeleted(arr[i])}>
                        <Text style={{fontSize: 16, padding: 5, color: 'white'}}>{arr[i]}</Text>
                    </TouchableOpacity>
                })}
            </View>
        </Popover>;


        return popView;
    }

    render(){
        return this.renderPopover();
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FCFCFC',
    },

});